<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Hello Vue.js</title>
</head>
<body>
<div id="box">
    <h1>Hello {{name}} !</h1>
    <p>请输入: <input type="text" v-model="name" value="" @change="getInputValue"/></p>
    <h3>性别: {{sex}}</h3>
    <label><input type="radio" v-model="sexValue" value="男" @change="getSexValue">男</label>
    <label><input type="radio" v-model="sexValue" value="女" @change="getSexValue">女</label>
</div>

</body>
<script>
    var va = new Vue ({
        data: function () {
            return {
                name: 'yizhaosan',
                sexValue: '男'
            };
        },
        methods: {
            getInputValue() {
                this.name;
            },
            getSexValue() {
                this.sexValue;
            }
        },
    });
</script>
</html>